<template>
    <form class="sift">
            <!-- 成员 -->
            <label for="member">家庭成员</label>
            <el-select v-model="siftInfo.member" id="member" placeholder="请选择" style="width: 120px;margin-right:40px">
                <el-option v-for="item in memberStore.member" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <!-- 一级支出分类 -->
            <label for="type1">一级分类</label>
            <el-select v-model="siftInfo.typeKey1" placeholder="请选择" style="width: 120px;margin-right:40px">
                <el-option v-for="item in financeStore.expenseType" :key="item.id" :label="item.typeName" :value="item.id" />
            </el-select>
            <!-- 二级支出分类 -->
            <label for="type1">二级分类</label>
            <el-select v-model="siftInfo.typeKey2" placeholder="请选择" 
            style="width: 120px;margin-right:40px" :disabled="!type2List?.length">
                <el-option v-for="item in type2List" :key="item.id" :label="item.typeName" :value="item.id" />
            </el-select>
            <!-- 后续需加入： 日期、金额 -->
            <el-button @click="$emit('filterChange')">筛选</el-button>
            <el-button @click="clearSiftedInfo">清空选择</el-button>
        </form>
</template>

<script setup lang="ts">
import {computed,watch} from 'vue'
import useMemberStore from '@/store/modules/member'
import useFinanceStore from '@/store/modules/finance';
import { SiftedExpense } from '@/types/expense';

defineEmits(['filterChange'])
let siftInfo = defineModel<SiftedExpense>('siftInfo',{
    required:true
})
const memberStore = useMemberStore()
const financeStore = useFinanceStore()
const type2List = computed(()=>{
    return financeStore.expenseType.find((item)=>{
        return item.id === siftInfo.value.typeKey1
    })?.secondList
})
watch(()=>siftInfo.value.typeKey1,()=>{
    siftInfo.value.typeKey2 = undefined
})

const clearSiftedInfo = ()=>{
    siftInfo.value = {
        page:1,
        pageSize:10
    }
}
</script>

<style scoped>
.sift {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid rgb(2, 209, 232);
    border-radius: 5px;



    label {
        margin-right: 10px;
        color: rgb(74, 74, 74);
    }
}
</style>